;(function () {
  function Dialog(obj) {
    Object.assign(
      this,
      {
        //默认参数
        bgColor: 'rgb(240, 249, 235)',
        text: '还没有填写！',
        color: 'rgb(103, 184, 58)',
        borderColor: 'rgb(225, 243, 216)',
        cls: 'icon toutiao icon-yuanxingxuanzhong',
      },
      obj
    )
    this.create()
  }
  Dialog.prototype = {
    constuctot: Dialog,
    create() {
      if (document.querySelector('.dialog')) {
        return
      }
      this.dialog = document.createElement('div')
      this.dialog.classList.add('dialog')
      this.dialog.style.cssText = `
      background-color:${this.bgColor};
      color:${this.color};
      borderColor:${this.borderColor};
      position: fixed;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      width: 300px;
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      padding: 10px;
      transition: top 1s;
      font-size:14px;
      z-index:3;
      `
      this.dialog.innerHTML = `
      <i class='${this.cls}'></i>${this.text}`
      this.dialog.querySelector('i').style.color = this.color
      this.dialog.querySelector('i').style.marginRight = '5px'
      document.body.appendChild(this.dialog)
      this.show()
    },
    show() {
      setTimeout(() => {
        this.dialog.style.top = '100px'
        this.dialog.addEventListener('transitionend', () => {
          setTimeout(() => {
            this.dialog.remove() //删除dialog
          }, 1000)
        })
      }, 100)
    },
  }

  window.Dialog = Dialog
})()
